<template>
  <div class="Login">
    <img src="@/assets/login.jpg" style="float:left;width: 100%; height: 100%; opacity:0.9" />
    <div class="TLogin">
      <div class="LoginTitle">在线考试系统管理平台</div>
      <div class="content">
        <!-- 登录页面 -->
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm"
          :inline="true">
          <!-- <el-form-item label="身份选择：" label-width="150px" style="
              margin-top: 30px;
              margin-left: 18px;
              width: 100%;
              display: flex;
              align-items: center;
            ">
            <template>
              <el-radio v-model="radio" label="1" border>教师</el-radio>
              <el-radio v-model="radio" label="2" border>学生</el-radio>
            </template>
          </el-form-item> -->
          <el-form-item label="姓名：" prop="username">
            <!-- autocomplete="off" 不会记录用户输入过的信息，保证安全性 -->
            <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>

          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item class="operation">
            <el-button type="primary" class="submitButton" @click="submitForm('ruleForm')">登录</el-button>
            <el-button type="primary" plain class="submitButton" @click="register">注册</el-button>
            <el-button type="info" class="submitButton" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchGet,fetchPost} from "@/axios";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    const password = (rule, value, callback) => {
      const passReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (passReg.test(value)) {
        callback(new Error('请输入6-18位数字或字母组合的密码'))
      } else {
        callback()
      }
    }
    return {
      radio: '1',
      ruleForm: {
        username: '',
        password: '',
        id:'',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur'},
          {
            min: 2,
            max: 20,
            message: '长度在 2 到 20 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { validator: password, trigger: 'blur' },
          {
            required: true,
            min: 6,
            max: 18,
            message: '长度在6到18个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
     submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        // if (valid) {
        //   this.$message.success('登陆成功')
        //   sessionStorage.setItem('token', '123')
        //   sessionStorage.setItem('password', this.ruleForm.password)
        //   // this.$store.commit('setToken', '123')
        //   if (this.ruleForm.password === '123456') {
        //     this.$router.push({ path: '/teach' })
        //   } else if (this.ruleForm.password === '1234567') {
        //     this.$router.push({ path: '/student' })
        //   }
        // } else {
        //   return false
        // }
        if(valid){
          // console.log(this.ruleForm);
          // const result = fetchPost('/api/user/login',this.ruleForm);
          // if(result.code == 200){
          //   this.$message.success('登录成功');
          //   this.$router.push({ path: '/teach' })
          // }
          this.$api.Login.logininto(this.ruleForm).then((res)=>{
            console.log(res);
           if(res.data.data.role=='1'){
            this.$message.success("登录成功");
            this.$router.push({ path: '/teach' })
           }else if(res.data.data.role=='2'){
            this.$message.success("登录成功");
            this.$router.push({ path: '/student' })
           }
           this.ruleForm.id = res.data.data.id;
           sessionStorage.setItem('Authorization',res.data.data.token);
           sessionStorage.setItem('userinfo',JSON.stringify(this.ruleForm));
          })
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    register () {
      this.ruleForm.username = ''
      this.ruleForm.password = ''
      this.$router.push({ path: '/register' })
    }
  }
}
</script>

<style>
body {
  margin: 0;
}
</style>

<style lang="scss" scoped>
//  封装组件颜色（全局）
$bgColor: rgba(41, 34, 34, 0.3);
$textColor: #131515;

.Login {
  width: 100%;
  height: 100vh;
  // background: url("../assets/login/about.png");
  background-size: 100% 120%;

  .TLogin {
    width: 550px;
    position: absolute;
    top: 48%;
    left: 38%;
    transform: translateY(-55%);

    .LoginTitle {
      color: $textColor;
      font-size: 28px;
      font-weight: 600;
      font-family: 华文楷体;
      letter-spacing: 8px;
      padding: 20px 20px;
      box-sizing: border-box;
    }

    .content {
      width: 100%;
      border-radius: 10px;
      background-color: $bgColor;

      .el-form {
        padding: 20px 40px 30px;
        box-sizing: border-box;
        text-align: center;

        .el-form-item {
          ::v-deep(.el-form-item__label) {
            font-size: 18px;
            font-weight: 600;
            font-family: 华文楷体;
            color: $textColor;
          }

          ::v-deep(.el-input__inner) {
            font-size: 14px;
            width: 234px;
            height: 36px;
            background: #ffffff;
          }

          .el-radio {
            color: $textColor;
            border-color: #333;
          }
        }

        .operation {
          display: flex;
          justify-content: center;
          margin-top: 20px;

          .submitButton {
            margin-left: 20px;
            width: 83px;
          }
        }
      }
    }
  }
}
</style>
